<template>
  <div class="real_estate">
    <QxHead @showModal="showMenuModal"></QxHead>
    <Menu :showModal="showModalFlag" @handleHideModal="handleHideModal" @handleChangeLan="handleChangeLan"/>
    <div class="real_estate_img">
      <img src="https://qiaoxin.oss-cn-shenzhen.aliyuncs.com/h5/houseList.png" alt="" v-if="lang == 'zh'">
      <img src="http://qiaoxin.oss-cn-shenzhen.aliyuncs.com/img/groupDisplay/dican.png" alt="" v-else>
    </div>
    <div class="saling">
        <div class="title">{{$i18n.messages[lang].salesItem}}</div>
        <swiper loop auto height="3.74rem" :duration="800" style="padding:0 .28rem" dots-position="center">
          <swiper-item  class="swiper-demo-img" v-for="(item, index) in swiperList" :key="index">
            <a @click="preview(item.img)" :href="item.url?item.url:'#'" style="display:block;height:3.74rem;width:100%;backgroundSize:100%" :style="{backgroundImage: 'url(' +item.img+ ')'}"></a>
          </swiper-item>
        </swiper>
    </div>
    <div style="padding: .43rem .45rem .57rem .4rem;background-color: #fff;margin-left: .28rem;margin-right: .28rem;margin-bottom: .44rem;">
      <div class="yunqi">
        <img src="../images/may.jpg" alt="">
      </div>
      <div class="desc">
        {{$i18n.messages[lang].project}}
      </div>
      <div class="btn-project" @click="$router.push('/projectDisplay')">{{$i18n.messages[lang].projectDetail}}<span style="margin-left: .26rem;"></span></div>
    </div>
    <BottomInfo />
  </div>
</template>
<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?0c6b7133f8b076c80f30ef205bddbfab";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
  import { SwiperItem,Swiper } from 'vux'

  import BottomInfo from "./common/bottomInfo";
  import QxHead from "./common/qxHead";
  import Menu from "./common/menu";
  let CONSTANT = require('../../wechat/static/constant/constant.js'),
    common = require("../../wechat/static/common/common.js"),
      wsService = require("../../wechat/static/common/wechat-jsdk.js");

  export default {
    components: {
      Swiper, SwiperItem,
      BottomInfo,
      BottomInfo,
      QxHead,
      Menu
    },
    data() {
      return {
          lang: "",
        showModalFlag: false,
        swiperList: [],
        swiperIndex: 0
      }
    },
    mounted() {
        this.lang = this.$i18n.locale
      this.getSliderList()
    },
    methods: {
      showMenuModal(bool) {
        this.showModalFlag = bool
      },
      handleHideModal(bool) {
        this.showModalFlag = bool
      },
      getSliderList() {
        let url = CONSTANT.URL.getSliderList;
        common.requestGetAjax(url, {}, {page: '/realEstates.html'}, (res) => {
          if (res.code == 200) {
            res.data.map( item => {
              this.swiperList.push({
                url: 'javascript:',
                img: 'https://qiaoxin.oss-cn-shenzhen.aliyuncs.com'+item.image,
                title: "1333"
              })
            })
          }
        })
      },
      preview(img) {
          let arr = []
          this.swiperList.map( item => {
              arr.push(item.img)
          })
          wsService.default.previewImage(img, arr);
      },
        handleChangeLan() {
          this.lang = this.$i18n.locale
        }
    }
  };
</script>
<style lang="less">
  .real_estate {
    /*padding-bottom: 1.31rem;*/
    background-color: #f2f6fa;
    .swiper-demo-img {
      a {
        -webkit-background-size: cover!important;
        background-size: cover!important;
        background-position: center;
        background-repeat: no-repeat;
      }
    }
    .real_estate_img {
      img {
        width: 100%;
        vertical-align: middle;
      }
    }
    .saling {
      .title {
        margin: .37rem 0;
        text-align: center;
        color: #0154A6;
        font-size: .38rem;
      }
    }
    .yunqi {
      margin-bottom: .44rem;
      img {
        width: 2.78rem;
      }
    }
    .desc {
      line-height: .42rem;
      font-size: .27rem;
      margin-bottom: .42rem;
    }
    .btn-project {
      /*width: 1.81rem;*/
      padding: 0 .2rem;
      display: inline-block;
      height: .68rem;
      line-height: .68rem;
      color: #0154A6;
      border: 1px solid #0154A6;
      font-size: .25rem;
      text-align: center;
      span {
        display: inline-block;
      }
      span:after {
        content: "";
        display: block;
        width: .12rem;
        height: .12rem;
        border: 1px solid #0154A6;
        transform: rotate(45deg);
        border-left: 0;
        border-bottom: 0;
      }
    }
  }
</style>

